<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset=UTF-8">
        <title>CID SECURE</title>
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">


        <link rel="stylesheet" type="text/css" href="../css/estilos.css"/>
        <!--        <link rel="stylesheet" type="text/css" href="css/demo.css"/>-->
        <!--estilos de la galeria        -->

        <script>
            $(document).ready(function(){
               
                $('#tweets').jQTwitter({
                    username: 'CIDsecureLoja',
                    count: 10,
                    show_image: true
                                    
                });
            });
        </script>
        <!--      javascript proporciones de la pantalla  -->
        <script>
            function updateBackground() {
                screenWidth = $(window).width();
                screenHeight = $(window).height();
                var bg = jQuery("#bg");
                // Proporcion horizontal/vertical. En este caso la imagen es cuadrada
                ratio = 1;
                if (screenWidth/screenHeight > ratio) {
                    $(bg).height("auto");
                    $(bg).width("100%");
                } else {
                    $(bg).width("auto");
                    $(bg).height("100%");
                }
                // Si a la imagen le sobra anchura, la centramos a mano
                if ($(bg).width() > 0) {
                    $(bg).css('left', (screenWidth - $(bg).width()) / 2);
                }
            }
            $(document).ready(function() {
                // Actualizamos el fondo al cargar la pagina
                updateBackground();
                $(window).bind("resize", function() {
                    // Y tambien cada vez que se redimensione el navegador
                    updateBackground();
                });
            });
        </script>
        <!--scripts twitter        -->
        <!--        <script type="text/javascript" src="js/twitter/jQuery.js"></script>-->
        <script type="text/javascript" src="../js/twitter/jquery.jQTwitter.js"></script>
        <!--scripts cambio        -->
        <script type="text/javascript" src="../js/pag/jquery.jQTwitter.js"></script>
    </head>
    <body>

        <!--            imagen de fondo    
        -->        <img id="bg" src="../images/fondoPrincipal.png" alt="Fondo"/>


        <div class="meny">
            <h2>Vis&iacute;tanos</h2>
            <ul>
                <li><a href="http://lab.hakim.se/avgrund/">Inicio</a></li>
                <li><a href="http://lab.hakim.se/radar/">Misi&oacute;n</a></li>
                <li><a href="http://lab.hakim.se/radar/">Visi&oacute;n</a></li>
                <li><a href="http://lab.hakim.se/forkit-js/">Servicios</a></li>
                <li><a href="http://lab.hakim.se/scroll-effects/">Blog</a></li>

            </ul>
        </div>



        <div class="meny-arrow"></div>


        <div class="contents">
            <div id="wrapper">

            <header>


                <figure><img src="../images/Logo-Horizontal.png"></figure>

                <nav id="menu">
                    <ul id="sombra">
                        <li><a href="../index.php">Inicio</a></li>
                        <li><a href="portafolio2.html">Portafolio</a></li>
                        <li><a href="#">Clientes</a></li>
                        <li><a href="servicios2.html">Servicios</a></li>
                        <li><a href="#">Cont&aacute;ctenos</a></li>
                    </ul>
                </nav>

            </header>
            <section id="contenedor">
                <div id="content">
                    <h4>About Us</h4>
                    <p>Nulla facilisi. Nam massa dolor, gravida nec, luctus vitae, tristique vel, arcu. Suspendisse rutrum. Integer ligula velit, malesuada sed, rhoncus sed, feugiat eget, mi. Nulla pharetra convallis mi. Cras euismod consectetuer mi. Integer molestie tincidunt ante. Vestibulum lacinia orci a est. Quisque aliquam dolor non urna. Praesent felis. Nulla elementum. Curabitur mi augue, mollis at, volutpat ut, fermentum in, neque. Donec eget arcu. Donec id velit nec arcu facilisis aliquet. Nulla vel nibh ac lacus tristique interdum. Cras sed dui in nibh hendrerit dignissim. Aenean at est ac purus consectetuer mollis. </p>
                </div>
            </section>

            <footer>
                <!--          son los wigets de redes sociales y eso  -->
                <div>
                    <section id="acerca">
                        <header>
                            <h3>Post recientes</h3>
                        </header>
                        <div id="texto">
                            <p>Somos una empresa dedicada a proveer servicios de seguridad .....</p>
                        </div>
                    </section>
                    <section id="otrosBlogs">
                        <header>
                            <h3>Twitter</h3>
                        </header>
                        <div id="texto">

                            <ul id="tweets">


                            </ul>


                        </div>

                    </section>
                    <section id="popular">
                        <header>
                            <h3>Facebook</h3>
                        </header>
                        <div id="texto">
                            <ul>
                                <li><a href="#">Lorem ipsum dolor sit amet</a></li>
                                <li><a href="#">Consectetur adipisicing elit, sed do eiusmod</a></li>
                                <li><a href="#">Duis aute irure dolor</a></li>
                                <li><a href="#">Excepteur sint occaecat cupidatat</a></li>
                            </ul>
                        </div>
                    </section>

                </div>

                <div id="autores">
                    <small>
                        Copyright &copy; 2012<br/>
                        Design & Development CIDsecure, Loja-Ecuador
                    </small>
                    <ul id="icons">
                        <li><a href="#" class="normaltip" title="Facebook"><img src="images/icon1.jpg" alt=""></a></li>
                        <li><a href="#" class="normaltip" title="Twitter"><img src="images/icon2.jpg" alt=""></a></li>
                        <li><a href="#" class="normaltip" title="Picasa"><img src="images/icon3.jpg" alt=""></a></li>
                        <li><a href="#" class="normaltip" title="YouTube"><img src="images/icon4.jpg" alt=""></a></li>
                    </ul>
                </div>

            </footer>
            </div>
        </div>

        <script src="../js/menu/meny.min.js"></script>
        <script>
            // Create an instance of Meny
            var meny = Meny.create({
                // The element that will be animated in from off screen
                menuElement: document.querySelector( '.meny' ),

                // The contents that gets pushed aside while Meny is active
                contentsElement: document.querySelector( '.contents' ),

                // [optional] The alignment of the menu (top/right/bottom/left)
                position: Meny.getQuery().p || 'left',

                // [optional] The height of the menu (when using top/bottom position)
                height: 300,

                // [optional] The width of the menu (when using left/right position)
                width: 260,

                // [optional] Distance from mouse (in pixels) when menu should open
                threshold: 40
            });

            // API Methods:
            // meny.open();
            // meny.close();
            // meny.isOpen();
			

            // Embed an iframe if a URL is passed in
            if( Meny.getQuery().u && Meny.getQuery().u.match( /^http/gi ) ) {
                var contents = document.querySelector( '.contents' );
                contents.style.padding = '0px';
                contents.innerHTML = '<div class="cover"></div><iframe src="'+ Meny.getQuery().u +'" style="width: 100%; height: 100%; border: 0; position: absolute;"></iframe>';
            }
        </script>

    </body>
</html>
